import React from 'react';
import { connect } from 'react-redux';
import  * as Request from '../../../services/home/index';
import Swiper from '../../../assets/js/libs/swiper.min.js';
import { lazyImg, goPage, setScrollTop } from '../../../assets/js/utils/index';
import SearchComponent from '../../../components/search';
import config from '../../../assets/js/conf/config';
import '../../../assets/css/common/swiper.min.css';
import Css from '../../../assets/css/home/index/index.css';

class Index extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            aSwiper: [],
            aNav: [],
            aGoods: [],
            aRecoGoods: [],
            bScroll: false,
            showSearch: false
        };
        this.bScroll = true;
    }

    componentDidMount() {
        setScrollTop(window.base.pages.index.scrollTop);
        this.initSwiper();
        this.getNav();
        this.getGoodsLevel();
        this.getRecoGoods();
        window.addEventListener('scroll', this.eventScroll.bind(this));
    }

    //加载轮播图
    initSwiper(){
        Request.getSwiper().then(res => {
            if(res.code === 200){
                this.setState({ aSwiper: res.data }, () => { //setState是异步的
                    new Swiper('.'+Css['swiper-wrap'], {
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true
                        },
                        pagination: { el: '.swiper-pagination' }
                    });
                });
            }
        });
    }

    //加载导航
    getNav(){
        Request.getNav().then(res => {
            if(res.code === 200){
                this.setState({ aNav: res.data }, () => {
                    lazyImg();
                });
            }
        });
    }

    //获取首页商品数据
    getGoodsLevel(){
        Request.getGoodsLevel().then(res => {
            if(res.code === 200){
                this.setState({ aGoods: res.data }, () => {
                    lazyImg();
                });
            }
        });
    }

    //获取推荐商品
    getRecoGoods(){
        Request.getRecoGoods().then(res => {
            if(res.code === 200){
                this.setState({ aRecoGoods: res.data });
            }
        });
    }

    //监听滚动事件
    eventScroll(){
        if(this.bScroll){
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const isShowBg = scrollTop >= 80 ? true : false;
            window.base.pages.index.scrollTop = scrollTop;
            this.setState({ bScroll: isShowBg });
        }
    }

    //显示隐藏搜索组件
    displaySearch(){
        this.setState({ showSearch: !this.state.showSearch });
    }

    //跳转到商品详情界面
    goToDetails(url, gid){
        this.props.history.push(`${config.path}${url}?gid=${gid}`);
    }

    componentWillUnmount(){
        this.bScroll = false;
        window.removeEventListener('scroll', this.eventScroll.bind(this), false);
        this.setState = (state, callback) => { return ; }
    }

    render() {
        const { aSwiper, aNav, aGoods, aRecoGoods, bScroll, showSearch } = this.state;
        return (
            <div className={Css['page']}>
                {/* 搜索栏 */}
                <div className={bScroll ? Css['search-header']+' '+Css['red-bg'] : Css['search-header']}>
                    <div className={Css['classify-icon']} onClick={goPage.bind(this, 'goods/classify')}></div>
                    <div className={Css['search-wrap']} onClick={() => this.displaySearch()}>
                        <div className={Css['search-icon']} ></div>
                        <div className={Css['search-text']}>请输入宝贝名称</div>
                    </div>
                    <div className={Css['login-wrap']}>
                        {
                            this.props.state.user.isLogin ? <div className={Css['my']} onClick={goPage.bind(this, 'home/my')}></div>
                            : <div className={Css['login-text']} onClick={goPage.bind(this, 'login/index')}>登录</div>
                        }
                    </div>
                </div>
                {/* 轮播图 */}
                <div className={Css['swiper-wrap']}>
                    <div className="swiper-wrapper">
                        {
                            aSwiper ? aSwiper.map(item => {
                                return  (
                                    <div className="swiper-slide" key={item.image}>
                                        <a href={item.webs} target="_blank" rel="noopener noreferrer"><img src={item.image} alt={item.title}/></a>
                                    </div>
                                )
                            }) : ''
                        }
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
                {/* 导航菜单 */}
                <div className={Css['quick-nav']}>
                    {
                        aNav ? aNav.map(item => {
                            return (
                                <div key={item.cid} className={Css['item']} onClick={goPage.bind(this, 'goods/classify/items?cid='+item.cid)}>
                                    <div className={Css['item-img']}>
                                        <img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={item.image} alt={item.title}/>
                                    </div>
                                    <div className={Css['item-text']}>{item.title}</div>
                                </div>
                            )
                        }) : ''
                    }
                </div>
                {/* 商品列表 */}
                { aGoods ? aGoods.map((item, index) => {
                    return(
                        <div key={item.title} className={Css['goods-level-wrap']}>
                            <div className={Css['classify-title']+" "+Css['color'+(index+1)]}>- {item.title} -</div>
                            <div className={Css['goods-level1-wrap']}>
                                {index%2 === 1 ? <React.Fragment>
                                    {item.items!==null ? item.items.slice(0, 2).map((ytem, yndex) => {
                                        return (
                                            <div key={`${ytem.cid}${ytem.image}`} className={Css['goods-level1-item0']} onClick={() => this.goToDetails('goods/details/item', ytem.gid)}>
                                                <div className={Css['goods-title2']}>{ytem.title}</div>
                                                <div className={Css['goods-text2']}>火爆开售</div>
                                                <div className={Css['goods-img2']}>
                                                    <img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={ytem.image} alt={ytem.title} />
                                                </div>
                                            </div>
                                        )
                                    }) : ''}
                                </React.Fragment>
                                : <React.Fragment>
                                    <div className={Css['goods-level1-item0']} onClick={() => this.goToDetails('goods/details/item', item.items[0].gid)}>
                                        <div className={Css['goods-title']}>{item.items[0].title}</div>
                                        <div className={Css['goods-text']}>精品打折</div>
                                        <div className={index===0?Css['goods-price1']:Css['goods-price2']}>{item.items[0].price}元</div>
                                        <div className={Css['goods-img']}>
                                            <img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={item.items[0].image} alt={item.items[0].title} />
                                        </div>
                                    </div>
                                    <div className={Css['goods-level1-item1']}>
                                        {item.items !== null ? item.items.slice(1, 3).map((ktem, kndex) => {
                                            return (
                                                <div key={`${ktem.cid}${ktem.image}`} className={Css['goods-row']} onClick={() => this.goToDetails('goods/details/item', ktem.gid)}>
                                                    <div className={Css['goods-row-title']}>{ktem.title}</div>
                                                    <div className={Css['goods-row-text']}>品质挑选</div>
                                                    <div className={Css['goods-row-img']}>
                                                        <img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={ktem.image} alt={ktem.title} />
                                                    </div>
                                                </div>
                                            )
                                        }) : ''}
                                    </div>
                                </React.Fragment>
                                }
                            </div>
                            <div className={Css['goods-list-wrap']}>
                                {index%2===1 ? item.items.slice(2).map((item2, index2) => {
                                    return (
                                        <div key={`${item2.cid}${item2.image}`} className={Css['goods-list']} onClick={() => this.goToDetails('goods/details/item', item2.gid)}>
                                            <div className={Css['title']}>{item2.title}</div>
                                            <div className={Css['image']}><img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={item2.image} alt={item2.title} /></div>
                                            <div className={Css['price']}>￥{item2.price}</div>
                                            <div className={Css['unprice']}>￥{item2.price+100}</div>
                                        </div> 
                                    )
                                }) :  item.items.slice(3).map((item2, index2) => {
                                    return (
                                        <div key={`${item2.cid}${item2.image}`} className={Css['goods-list']} onClick={() => this.goToDetails('goods/details/item', item2.gid)}>
                                            <div className={Css['title']}>{item2.title}</div>
                                            <div className={Css['image']}><img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={item2.image} alt={item2.title} /></div>
                                            <div className={Css['price']}>￥{item2.price}</div>
                                            <div className={Css['unprice']}>￥{item2.price+100}</div>
                                        </div> 
                                    )
                                })}
                            </div>
                        </div>
                    )
                }) : ''}
                {/* 推荐列表 */}
                <div className={Css['reco-title-wrap']}>
                    <div className={Css['line']}></div>
                    <div className={Css['reco-text-wrap']}>
                        <div className={Css['reco-icon']}></div>
                        <div className={Css['reco-text']}>为您推荐</div>
                    </div>
                    <div className={Css['line']}></div>
                </div>
                <div className={Css['reco-item-wrap']}>
                    {aRecoGoods !== null ? aRecoGoods.map((ptem, pndex) => {
                        return (
                            <div key={ptem.gid} className={Css['reco-item']} onClick={() => this.goToDetails('goods/details/item', ptem.gid)}>
                                <div className={Css['reco-item-image']}>
                                    <img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={ptem.image} alt={ptem.title} />
                                </div> 
                                <div className={Css['reco-item-title']}>{ptem.title}</div>
                                <div className={Css['reco-item-price']}>￥{ptem.price}</div>
                            </div>
                        )
                    }) : ''}
                </div>
                {/* 搜索组件 */}
                {showSearch && <SearchComponent closeSearch={() => this.displaySearch()}></SearchComponent>}
            </div>
        )
    }
}

export default connect((state)=>{
    return {
        state
    }
})(Index);